<template>
  <div class="scheduleBox" >
    <div class="calendarBox">
      <table>
        <thead>
          <tr>
            <th>{{month}}月</th>
            <th v-for="(item, index) in days" :key="index">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>上午</td>
            <td v-for="(item, index) in tabData[0]" :key="index" :class="item == 1? 'has': ''"><span> </span></td>
          </tr>
          <tr>
            <td>上午</td>
            <td v-for="(item, index) in tabData[1]" :key="index" :class="item == 1? 'has': ''"><span> </span></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="orderBox">
      <el-carousel indicator-position="outside" trigger="click"
        arrow="never" :loop="true" :interval="10000">
        <el-carousel-item v-for="(items, index) in orderData" :key="index">
          <div class="orderGroup flex_wb">
            <div class="orderItem flex_wb" v-for="item in items" :key="item.id">
              <div class="leftBox flex_cb">
                <p>{{item.orderNum}}</p>
                <p>订单规格：宽度{{item.width}}，厚度：{{item.height}}，长度：{{item.length}}</p>
                <p>订单量：数量{{item.count}}，重量{{item.weight}}，已完成{{item.finish}}</p>
                <div class="planBox">
                  <p class="bar flex">
                    <span v-for="(unit, planIndex) in item.plan.process" :key="unit.id"
                      :class="item.plan.now - 1 >= planIndex ? item.plan.now - 1 == planIndex ?'finish now':'finish':''"
                      class="relative"></span>
                  </p>
                  <p class="text flex">
                    <span v-for="unit in item.plan.process" :key="unit.id">{{unit.name}}</span>
                  </p>
                </div>
              </div>
              <div class="rightBox flex_rc" :id='index'>
                <ve-gauge :judge-width="true" :height="height" :width="height" 
                  :data="item.gauge" :settings="chartSettings" :title="title"></ve-gauge>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';

  export default {
    name: 'Schedule',
    props: {

    },

    data () {
      //仪表盘配置项
      this.chartSettings = {
        dataType: {
          '完成率': 'percent'
        },
        seriesMap: {
          '完成率': {
            min: 0,
            max: 1,
            center: ['50%','45%'],
            radius: '90%',
            axisLine: {
              lineStyle: {
                color: [[0.25, '#00d8df'],[0.75, '#a682e6'],[1, '#e15d68']],
                width: 8,
              }
            },
            axisLabel: {show:false},
            axisTick: {show:false},
            splitLine: {show:false},
            pointer: {width:6},
            itemStyle: {color: "#0bd3ff"},
            title: {
              offsetCenter: [0, '-30%'],
              textStyle: {
                fontWeight: 'bolder',
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            detail: {
              offsetCenter: [0, '70%'],
              textStyle: {
                fontSize: 18,
                color: '#ffffff'
              }
            }
          }
        }
      }

      return {
        timeOut: '',                              //计时器
        month: '',                                //月份
        days: [],                                 //当月天
        tabData: [                                //排班数据
          [1,0],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],
          [1,1],[0,1],[0,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],
          [1,1],[1,1],[0,1],[1,1],[0,1],[0,1],[1,1],[1,1],[1,1],[1,1],[1,1] 
        ],
        orderData: [                              //订单数据（详见接口文档）
          {
            id: 1, orderNum: 'MX7B-1200', width: 123, height: 123, length: 132, count: 123, weight: 132, finish: 123, percent: '50%', 
            plan: { now: 2, process:[ {id: 1, name: '吹膜'}, {id: 2, name: '分切'}, {id: 3, name: '折膜'} ] }, 
            gauge: 0.8
          },
        ],
        chartData: {                              //仪表盘数据塞
          columns: ['type', 'value'],
          rows: [
            { type: '完成率', value: 0.8 }
          ]
        },
        height: '100',
        title: {
          text: '完成率',
          left: 'center',
          bottom: -5,
          textStyle: {
            color: "#acb1bd",
            fontSize: 15,
            fontWeight: 500
          }
        },
      }
    },

    created () {
      this.$nextTick(() => {
        var box = document.getElementById("0");
        console.log(box.clientHeight);
        this.height = box.clientHeight + 'px';
      })
      
      let that = this;
      that.loadDate();
      that.loadTabData();
      that.loadOrderData();

      that.timeOut = setInterval(function(){
        that.loadDate();
        that.loadTabData();
        that.loadOrderData();
      },60*60*1000);

      let tabData = [[],[]];
      that.tabData.map(item => {                        //接口确定后删除
        tabData[0].push(item[0]);
        tabData[1].push(item[1])
      })
      that.tabData = tabData;

      let orderData = [];
      that.orderData.map(item => {                        //接口确定后删除
        that.chartData.rows.value = item.gauge;
        item.gauge = that.chartData;
      })

      for(var i = 0, len = that.orderData.length; i < len;i += 6){    //接口确定后删除
        orderData.push(that.orderData.slice(i,i + 6));
      }
      that.orderData = orderData;

    },

    destroyed () {
      clearInterval(this.timeOut)
    },

    methods: {
      //加载日历
      loadDate () {
        let that = this;
        let lastDays = '';
        let now = new Date();
        let nowDayOfWeek = now.getDay();
        let nowDay = now.getDate();
        let nowMonth = now.getMonth();
        let nowYear = now.getYear();
        nowYear += (nowYear < 2000) ? 1900 : 0;

        var monthStartDate = new Date(nowYear, nowMonth, 1); 
        var monthEndDate = new Date(nowYear, nowMonth + 1, 1); 
        lastDays = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24);
        for(let i = 0; i < lastDays; i++) {
          let day = i + 1;
          if(day < 10){
            day = "0" + day;
          }
          that.days.push(day)
        }

        if(nowMonth < 10){
          nowMonth ++;
          nowMonth = "0" + nowMonth;
        }
        that.month = nowMonth;

      },

      //加载排班信息
      loadTabData() {
        let that = this;
        let tabData = [[],[]];
        axios.post(this.host+'')
        .then(res=>{
          // console.log(res.data);                   //接口确定后解开
          // that.tabData = res.data;
          // that.tabData.map(item => {
          //   tabData[0].push(item[0]);
          //   tabData[1].push(item[1])
          // })
          // that.tabData = tabData;
        })
        .catch(error=>{
          console.log(error);
        });
      },

      loadOrderData () {
        let that = this;
        let orderData = [];
        axios.post('/api')
        .then(res=>{
          // console.log(res.data);                               /接口确定后解开
          // that.orderData = res.data;
          // that.orderData.map(item => {
          //   that.chartData.rows.value = item.gauge;
          //   item.gauge = that.chartData;
          // })
          // for(var i = 0, len = that.orderData.length; i < len;i += 6){
          //   orderData.push(that.orderData.slice(i,i + 6));
          // }
          // that.orderData = orderData;
        })
        .catch(error=>{
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  .scheduleBox{
    height: 100%;
  }
  .calendarBox{
    width: 100%;
  }
  .calendarBox table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #324a63
  }
  .calendarBox table td{
    height: 26px;
    text-align: center;
    color: #bfbfbf;
    border: 1px solid #324a63;
    padding: 0;
  }
  .calendarBox table td:first-child{
    color: #bfbfbf;
    font-size: 14px;
  }
  .calendarBox table td span{
    width: 100%;
    height: 10px;
    display: inline-block;
    position: relative;
  }
  .calendarBox .has span{
    background-color: #7ecef4;
  }
  .calendarBox .has span::before{
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    left: -1px;
    background-color: #7ecef4;
  }
  .calendarBox table th{
    height: 26px;
    color: #7ecef4;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #324a63;
    background-color: #12212c;
  }
  .orderBox{
    width: 100%;
    height: calc(100% - 78px);
    padding-top: 20px;
    box-sizing: border-box;
  }
  .orderBox .orderItem{
    width: 49%;
    height: 31%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 6px;
    background: #2a435f;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #2b4e6a), color-stop(100%, #303e5e));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #2b4e6a 0%, #303e5e 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b4e6a, endColorstr=#303e5e, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .orderBox .orderGroup{
    width: 100%;
    height: 100%;
  }
  .orderBox .leftBox{
    width: 65%;
  }
  .orderBox .leftBox p{
    width: 100%;
    margin: 0;
    color: #ffffff;
    font-size: 14px;
  }
  .orderBox .leftBox p:first-child{
    color: #7ecef4;
    font-size: 16px;
  }
  .orderBox .leftBox .planBox{
    width: 100%
  }
  .planBox .bar{
    width: 100%;
    height: 12px;
    border-radius: 7px;
    background-color: #67707e;
  }
  .planBox span{
    height: 100%;
    width: 100%;
    display: inline-block;
    text-align: center;
  }
  .planBox span:first-child{
    border-radius: 7px 0 0 7px;
  }
  .planBox span.now{
    border-radius: 0 7px 7px 0;
  }
  .planBox p.text span{
    color: #7ecef4;
    font-size: 12px;
  }
  .planBox .bar .finish{
    background-color: #fdb984;
  }
  .planBox .bar .now:before{
    content: '';
    display: block;
    position: absolute;
    margin-left: -8px;
    left: 50%;
    top: -7px;
    border-width: 5px 8px 5px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #41a8ff;
    transform: rotate(90deg)
  }
  .orderBox .rightBox{
    width: 35%;
  }
</style>


